<template>
    <div class="search-page">
                <div class="top">
            <div class="search">
                <div class="left-search">
                    <div class="sh">按菜名搜<i class="select-arrow"></i></div>
                    <input class="sh-name" type="text" v-todo-focus placeholder="请输入菜名" v-model="value">
                    <div class="clearWord" @click="clearWord" v-if="showCC">
                        <img src="../assets/images/叉叉2.png" alt="">
                    </div>
                </div>
                <div @click="$router.go(-1)" class="cancel" v-show="!showBtn">取消</div>
                <div class="cancel" v-show="showBtn" @click="search">搜索</div>
            </div>
        </div>
        <div class="content" v-if="showflag">
            <div class="hs-search">
                <div class="hs-top">
                    <div class="hs-l">
                        <img src="../assets/images/shizhong.png" alt="">
                        <span class="hs-txt">历史搜索</span>
                    </div>
                    <div class="hs-r" @click="clearSearch">
                        <img src="../assets/images/lajitong.png" alt="">
                        <span class="hs-txt">清空</span>
                    </div>
                </div>
                 <div class="hot-list" v-if="hsList">
                    <span class="ht-item" v-for="(item,index) in hsList" :key="index" @click="selectWord(index)">{{item}}</span>
                    
                    </div>
            </div>
            <div class="hot-search">
                <div class="hot-top">
                    <img src="../assets/images/remen-xianxing.png" alt="">
                    <span class="ht-txt">热门搜索</span>
                </div>
                <div class="hot-list" v-if="hotList">
                    <span class="ht-item" v-for="(item,index) in hotList" :key="index" @click="hotSearch(index)">{{item}}</span>
                   
                </div>
            </div>
            <div class="hs-list" v-if="viewList">
                <div class="list-top">
                    <div class="top-left">
                        <img src="../assets/images/yanjing.png" alt="">
                        <span class="hs-txt">浏览记录</span>
                    </div>
                    <div class="top-right" @click="clearRecord">
                        <img src="../assets/images/lajitong.png" alt="">
                        <span class="hs-txt">清空</span>
                    </div>
                </div>
                <div class="lists">
                    <router-link tag="div" :to="'/detail?id='+item.id" class="hs-list-item" v-for="item in viewList" :key="item.id">
                        <div class="left-img">
                            <img v-if="item.authorId!=123564" :src="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'" alt="">
                            <img v-else :src="'blob:http://localhost:8080/'+ item.imageid+''" alt="">
                        </div>
                        <div class="right-txt">
                            <h4>{{item.name}}</h4>
                            <span class="caipu">菜谱</span>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <!-- 搜索结果界面 -->
        <div class="searchlists" v-if="!showflag">
            <van-loading type="spinner" v-if="showLoading"  />
            <!-- <div class="searchlists-top"></div> -->
            <div class="lists" ref="list">
                <van-empty v-if="showEmpty" description="目前还搜不到你想要的内容" />
                <router-link tag="div" :to="'/detail?id='+item.id"  class="hs-list-item" v-for="item in searchList" :key="item.id">
                        <div class="left-img">
                            <img :src="'https://pic.ecook.cn/web/'+ item.imageid+'.jpg!wl280'" alt="">
                        </div>
                        <div class="right-txt">
                            <h4 class="one-txt-cut">{{item.name}}</h4>
                            <div class="mater one-txt-cut">
                            <span class="txt" v-for="k in item.materialList" :key="k.id">{{k.name}}、</span>
                            </div>
                            <div class="recommend" v-if="item.recommend">{{item.recommend}}</div>
                            <div class="info">
                                <span class="collect">收藏 {{item.collectNum}}</span>
                                <span class="seed">浏览 {{item.viewNum}}</span>
                            </div>
                        </div>
                    </router-link>
            </div>
        </div>
        <div class="TipsSearchList" v-if="showTips">
            <ul>
                <li v-for="(item,index) in TipsSearchList" :key="index" @click="TipsSearch(index)">{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import {getSearchData,getHotSearchKeywordsData,getHotSearchrecommendData} from '../api/search'
    export default {
        data() {
            return {
                searchFlag: false,
                showflag:true,
                hsList:[],//历史搜索
                hotList:null,//热门搜索
                searchList:null,//搜索结果
                value:'',//搜索关键字
                showEmpty:false,
                showLoading:true,
                TipsSearchList:null,//关键字列表
                showTips:false,
                viewList:null,
                showCC:false,//清除输入框文字按钮显隐
                authorId:null,
            };
        },
        methods: {
            // 获取数据
            getSearchDataFun(keyword){
                getSearchData(keyword).then(data=>{
                    console.log(data);
                    if (data) {
                        setTimeout(() => {
                            this.showLoading = false
                        }, 800);
                        this.showflag = false
                        this.showEmpty = false
                        this.showTips = false
                    }
                    if (data.data.recipeResultList2.length==0) {
                        this.showEmpty = true
                    }
                    this.searchList = data.data.recipeResultList2
                })
            },
            //热门搜索
            getHotSearchKeywordsFun(){
                getHotSearchKeywordsData().then(data=>{
                    console.log(data);
                    this.hotList = data.list
                })
            },
            //搜索关键字
            getHotSearchrecommendFun(keyword){
                getHotSearchrecommendData(keyword).then(data=>{
                    console.log(data);
                    if (data.data.recipeTipsSearchList.length==0) {
                        this.showEmpty = true
                        this.showTips = false
                    }else{
                        this.showEmpty = false
                        // this.showTips = true

                    }
                    this.TipsSearchList = data.data.recipeTipsSearchList
                })
            },
            // 搜索
            search(){
                if (this.value) {
                    this.showflag = false
                    let index = this.hsList.findIndex(item=>item==this.value)
                    if (index==-1) {
                        this.hsList.push(this.value)
                    }
                    this.getSearchDataFun(this.value)
                    window.localStorage.setItem('hsList',JSON.stringify(this.hsList))
                    
                }
               
                this.showLoading= true
            },
            //清空搜索框文字
            clearWord(){
                this.value = ''
            },
            // 清空搜索记录
            clearSearch(){
                this.hsList = []
                window.localStorage.removeItem("hsList")
            },
            // 清空浏览记录
            clearRecord(){
                this.viewList = null
                window.localStorage.removeItem("watchHistory")
            },
            // 通过历史记录搜索
            selectWord(index){
                this.showLoading= true
                this.value = this.hsList[index]
                this.showTips = false
                this.getSearchDataFun(this.hsList[index])
            },
            // 通过热门搜索
            hotSearch(index){
                this.showLoading= true
                this.value = this.hotList[index]
                this.showTips = false
                this.getSearchDataFun(this.hotList[index])

                let index1 = this.hsList.findIndex(item=>item==this.hotList[index])
                if (index1==-1) {
                    this.hsList.push(this.hotList[index])
                }
                window.localStorage.setItem('hsList',JSON.stringify(this.hsList))
            },
            //通过关键字搜索
            TipsSearch(index){
                this.showLoading= true
                this.value = this.TipsSearchList[index]
                this.showTips = false
                this.getSearchDataFun(this.TipsSearchList[index])

                let index1 = this.hsList.findIndex(item=>item==this.TipsSearchList[index])
                if (index1==-1) {
                    this.hsList.push(this.TipsSearchList[index])
                }
                window.localStorage.setItem('hsList',JSON.stringify(this.hsList))
            }
        },
        created() {
            let userId = window.localStorage.getItem("userId")
            this.authorId = userId
            this.getHotSearchKeywordsFun()
            let tempArr =  window.localStorage.getItem("hsList")
            this.hsList =JSON.parse(tempArr)==null?[]:JSON.parse(tempArr)
            let tempHisWatch = JSON.parse(window.localStorage.getItem("watchHistory"))
            this.viewList = tempHisWatch==null?null:tempHisWatch
        },
       
        computed:{
            showBtn(){
                if (this.value) {
                    return true
                }else{
                    return false
                }
            },              
        },
        watch:{
            "value":function () {
                this.showflag = true
                this.showCC = true
                if (this.value=='') {
                    this.showTips = false
                    this.showCC = false
                }else{
                    this.showTips = true
                    this.getHotSearchrecommendFun(this.value)
                }
            },
        },
        // 自定义指令
            directives:{
              "todo-focus":{     
                inserted:function(el){      
                  // 获取焦点
                  el.focus()
                }
              }
            },
    }
</script>

<style lang="less" scoped>
.search-page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

        .top {
            height: 45px;
            padding-bottom: 10px;

            .search {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: #fafafa;
                white-space: nowrap;

                .left-search {
                    width: 70%;
                    height: 20px;
                    padding: 5px;
                    margin-left: 20px;
                    border-radius: 6px;
                    background-color: #f2f2f2;
                    position: relative;

                    .sh {
                        display: inline-block;
                        width: 30%;
                        font-size: 13px;
                        color: #9a9a9a;
                        font-weight: bold;
                        border-right: 2px solid #ccc;

                        .select-arrow {
                            width: 0;
                            height: 0;
                            border: 4px solid transparent;
                            border-top-color: #a1a1a1;
                            display: inline-block;
                            margin-left: 6px;
                            margin-right: 5px;
                            margin-top: 5px;
                        }
                    }

                    .sh-name {
                        width: 60%;
                        display: inline-block;
                        font-size: 14px;
                        color: #000;
                        margin-left: 8px;
                        border: none;
                        outline: none;
                        background-color: #f2f2f2;
                    }
                    .clearWord{
                        width: 15px;
                        height: 15px;
                        position: absolute;
                        right: 5px;
                        top: 0;
                        bottom: 0;
                        margin: auto 0;
                    }
                }

                .cancel {
                    margin-right: 30px;
                    font-size: 14px;
                    color: #000;
                    font-weight: bold;
                }
            }
        }

        .content {
            height: 100%;
            padding: 0 15px;
            overflow-y: scroll;

            .hs-search {
                display: flex;
                flex-direction: column;
                .hs-top {
                    height: 50px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .hs-l {
                        height: 100%;
                        line-height: 50px;
                        display: flex;
                        align-items: center;

                        &>img {
                            width: 18px;
                            height: 18px;
                            margin-right: 6px;
                            display: block;
                        }

                        .hs-txt {
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }

                    .hs-r {
                        height: 100%;
                        display: flex;
                        align-items: center;

                        &>img {
                            width: 18px;
                            height: 18px;
                            display: block;
                            margin-right: 4px;
                        }

                        .hs-txt {
                            font-size: 13px;
                            color: #8a8a8a;
                            font-weight: bold;
                        }
                    }
                }
                .hot-list {
                    padding: 0 10px;

                    .ht-item {
                        display: inline-block;
                        padding: 7px 15px;
                        margin: 5px 2px;
                        background-color: #f1f1f1;
                        border-radius: 12px;
                        font-size: 12px;
                        color: #a6a6a6;
                        font-weight: bold;
                    }
                }
            }

            .hot-search {
                margin-bottom: 10px;

                .hot-top {
                    display: flex;
                    align-items: center;
                    height: 50px;
                    line-height: 50px;


                    &>img {
                        width: 18px;
                        height: 18px;
                        display: block;
                        margin-right: 4px;

                    }

                    .ht-txt {
                        font-size: 14px;
                        font-weight: bold;
                    }
                }

                .hot-list {
                    padding: 0 10px;

                    .ht-item {
                        display: inline-block;
                        padding: 7px 15px;
                        margin: 5px 2px;
                        background-color: #f1f1f1;
                        border-radius: 12px;
                        font-size: 12px;
                        color: #a6a6a6;
                        font-weight: bold;
                    }
                }
            }

            .hs-list {
                margin-bottom: 90px;

                .list-top {
                    height: 50px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;

                    .top-left {
                        height: 100%;
                        line-height: 50px;
                        display: flex;
                        align-items: center;

                        &>img {
                            width: 18px;
                            height: 18px;
                            margin-right: 6px;
                            display: block;
                        }

                        .hs-txt {
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }

                    .top-right {
                        height: 100%;
                        display: flex;
                        align-items: center;

                        &>img {
                            width: 18px;
                            height: 18px;
                            display: block;
                            margin-right: 4px;
                        }

                        .hs-txt {
                            font-size: 13px;
                            color: #8a8a8a;
                            font-weight: bold;
                        }
                    }
                }

                .lists {
                    padding: 0 5px;

                    .hs-list-item {
                        height: 90px;
                        margin: 10px 0 20px 0;
                        display: flex;

                        .left-img {
                            width: 123px;
                            height: 100%;
                            border-radius: 10px;
                            overflow: hidden;
                        }

                        .right-txt {
                            width: 180px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            height: 100%;
                            padding: 0 15px;

                            &>h4 {
                                font-size: 16px;
                                font-weight: bold;
                                margin-top: 5px;
                                line-height: 20px;
                                letter-spacing: 0.8px;
                            }

                            .caipu {
                                display: block;
                                width: 25px;
                                font-size: 13px;
                                padding: 5px 10px;
                                background-color: #f2f2f2;
                                white-space: nowrap;
                                border-radius: 6px;
                                color: #c2c2c2;
                                font-weight: bold;
                                margin-bottom: 5px;
                            }
                        }
                    }
                }
            }

            &::-webkit-scrollbar {
                display: none;
            }
        }
        .searchlists{
            padding: 0 15px;
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            overflow: hidden;
           .lists{
            height: 100%;
            overflow-y: scroll;
            
             .hs-list-item {
                height: 90px;
                margin: 10px 0 20px 0;
                display: flex;
                .left-img {
                    width: 123px;
                    height: 100%;
                    border-radius: 10px;
                    overflow: hidden;
                }
                .right-txt {
                    width: 210px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 100%;
                    padding: 0 0 0 15px;
                    &>h4 {
                        font-size: 16px;
                        font-weight: bold;
                        line-height: 20px;
                        letter-spacing: 0.8px;
                    }
                    .mater{
                        width: 100%;
                        margin-bottom: 10px;
                    }
                    .txt {
                        display: inline-block;
                        font-size: 12px;
                        // margin-top: -30px;
                    }
                    .info{
                       display: flex;
                           align-items: center;
                           
                           &>span{
                               display: block;
                               font-size: 12px;
                               color: #999;
                           }
                           .seed{
                               margin-left: 10px;
                           }
                       }
                       .recommend{
                           width: 50px;
                           font-size: 12px;
                           text-align: center;
                           padding: 4px 6px;
                           border-radius: 6px;
                           margin-bottom: 10px;
                           background-image: linear-gradient(90deg,#faca7b,#feeeda);
                       }
                       }
                }
                &::-webkit-scrollbar {
                display: none;
            }
           }
           ::v-deep .van-loading{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #fff;
                 text-align: center;
                 line-height: 300px;
                z-index: 99;
                 }

        }
        .TipsSearchList{
            position: fixed;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            background-color: #fff;
            overflow: hidden;
            &>ul{
                height: 100%;
                padding: 0 15px;
                overflow-y: scroll;

                &>li{
                    font-size: 13px;
                    padding: 10px 0;
                }
            }
        }
}
</style>